<template>
  <el-dialog
    width="900px"
    title="防火墙选项配置"
    :visible.sync="innerNode"
    append-to-body>
    <el-tabs v-model="activeName">
      <!-- 物理网口配置 -->
      <el-tab-pane label="物理网口配置" name="first">
<!--        <el-form label-width="120px" label-position="left" ref="physicalInterfaces">-->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="interfaceName" label="接口名称"></el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="interfaceEdit(scope.row,scope.$index)" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
<!--        </el-form>-->
      </el-tab-pane>
      <!-- 路由配置-->
      <el-tab-pane label="路由配置" name="second">
        <p class="topBar"><span @click="dialogRoute=true">新建路由</span></p>
        <el-table
          :data="firewall.routingConfigurations"
          border
          style="width: 100%">
          <el-table-column
            prop="destinationAddress"
            label="目的地址"
            align="center"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="mask"
            label="掩码"
            align="center"
            width="160px">
          </el-table-column>
          <el-table-column
            prop="priority"
            align="center"
            label="优先级">
          </el-table-column>
          <el-table-column
            prop="nextHop"
            align="center"
            width="140px"
            label="下一跳">
          </el-table-column>
          <el-table-column
            prop="outflowInterface"
            align="center"
            label="网络接口">
          </el-table-column>
          <el-table-column
            prop="weights"
            align="center"
            label="权重">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
           >
            <template slot-scope="scope">
              <el-button
                @click="delRouter(scope.$index)"
                type="text"
                size="small">
                移除
              </el-button>
              <el-button
                @click="editRouter(scope.row,scope.$index)" size="small" type="text">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 地址列表配置 -->
      <el-tab-pane label="地址列表配置" name="third">
        <p class="topBar"><span @click="addressShow = true">新建地址</span></p>
         <el-table
            :data="firewall.addressLists"
            border
            style="width: 100%">
            <el-table-column
              fixed
              prop="name"
              align="center"
              label="接口名称">
            </el-table-column>
            <el-table-column
              prop="ipAddress"
              align="center"
              label="源地址">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="100px">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="firewall.addressLists.splice(scope.$index,1)">移除</el-button>
                <el-button type="text" size="small" @click="editorAddress(scope.row,scope.$index)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

      </el-tab-pane>
      <!-- 安全策略配置 -->
      <el-tab-pane label="安全策略配置" name="five">
        <p class="topBar"><span @click="dialogStrategy=true">新建策略</span></p>
        <el-table
          :data="firewall.strategyList"
          border
          style="width: 100%">
          <el-table-column
            prop="serialNumber"
            label="序号"
            align="center">
          </el-table-column>
          <el-table-column
            prop="strategyName"
            label="规则名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="sourceAddress"
            align="center"
            label="源地址">
          </el-table-column>
          <el-table-column
            prop="destinationAddress"
            align="center"
            label="目的地址">
          </el-table-column>
          <el-table-column
            prop="sourcePort"
            align="center"
            label="源端口">
          </el-table-column>
          <el-table-column
            prop="service"
            align="center"
            label="服务类型">
          </el-table-column>
          <el-table-column
            align="center"
            label="访问控制">
            <template slot-scope="scope">
              <span>{{scope.row.accessControl ==1 ? "允许" : "禁止"}}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="delStrategy(scope.$index)"
                type="text"
                size="small">
                移除
              </el-button>
              <el-button
                @click="editStrategy(scope.row,scope.$index)" size="small" type="text">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        <el-form :inline="true" label-width="90px" label-position="left">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="规则名">-->
<!--              <el-input v-model="strategyObj.strategyName"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="序号">-->
<!--              <el-input v-model.number="strategyObj.serialNumber"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="源地址">-->
<!--              <el-select v-model="strategyObj.sourceAddress" style="max-width:179px">-->
<!--                <el-option v-for="(n,i) in firewall.addressLists" :key="i" :label="n.name" :value="n.name"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="目的地址">-->
<!--              <el-select v-model="strategyObj.destinationAddress" style="max-width:179px">-->
<!--                <el-option v-for="(n,i) in firewall.addressLists" :key="i" :label="n.name" :value="n.name"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="源端口">-->
<!--              <el-input v-model.number="strategyObj.sourcePort"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="服务">-->
<!--              <el-select v-model="strategyObj.service" style="max-width:179px">-->
<!--                <el-option label="any" value="any"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="访问控制">-->
<!--              <el-radio-group v-model="strategyObj.accessControl">-->
<!--                <el-radio :label="1">允许</el-radio>-->
<!--                <el-radio :label="0">禁止</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-form>-->
      </el-tab-pane>
      <!-- 规格配置 -->
      <el-tab-pane label="规格配置" name="six">
        <el-form :inline="true" label-width="90px" label-position="left">
          <el-form-item label="规格模板">
            <el-select v-model="createVM.dname" placeholder="请选择模板" @change="VMChange">
              <el-option v-for="(n,i) in allCreateVM" :label="n.dname" :key="i" :value="n.dname"></el-option>
            </el-select>
          </el-form-item>
          <br/>
          <el-form-item label="CPU">
            <el-input v-model="createVM.vcpusNeed" class="adjustInp" :disabled="true"
                      style="width: 200px;background-color: #fff;"></el-input>
          </el-form-item>
          <br/>
          <el-form-item label="磁盘空间">
            <el-input v-model="createVM.diskGbNeed" class="adjustInp" :disabled="true"
                      style="width: 200px;background-color: #fff;"></el-input>
          </el-form-item>
          <br/>
          <el-form-item label="内存">
            <el-input v-model="createVM.memoryNeed" class="adjustInp" :disabled="true"
                      style="width: 200px;background-color: #fff;"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="物理网口配置" :visible.sync="interfacesShow" width="50%" append-to-body>
      <el-form ref="form" label-width="100px">
        <el-form-item label="接口名称" prop="interfaceName">
          <el-input v-model="physicalInterfaces.interfaceName" class="adjustInp" :disabled="true"
                    style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="工作模式">
          <el-select v-model="physicalInterfaces.operatingMode" placeholder="请选择">
            <el-option label="路由模式" :value="0"></el-option>
            <el-option label="透明模式" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网络">
          <el-select v-model="physicalInterfaces.netWorkName" placeholder="请选择">
            <el-option v-for="(item,index) in netWorkName" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址获取">
          <el-select v-model="physicalInterfaces.ipobtainMode" placeholder="请选择">
            <el-option label="通过DHCP获取" :value="0"></el-option>
            <el-option label="静态配置" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input v-model="ipaddressAndMask01" class="adjustInp" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="掩码">
          <el-input v-model="ipaddressAndMask02" class="adjustInp" style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="interfacesShow = false" size="small">取 消</el-button>
      <el-button size="small" type="primary" @click="savePort(flag)">确 定</el-button>
    </span>
    </el-dialog>
    <!-- 新建路由弹窗 -->
    <el-dialog
      title="新建路由"
      :visible.sync="dialogRoute"
      width="500px"
      append-to-body>
      <el-form label-width="120px" label-position="left">
        <el-form-item label="目的地址">
          <el-input v-model="routingConfigurationsObj.destinationAddress" class="adjustInp"
                    placeholder="请输入IP地址类型（IPv4）"></el-input>
        </el-form-item>
        <el-form-item label="掩码">
          <el-input v-model="routingConfigurationsObj.mask" class="adjustInp" vlaue="1"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-input class="adjustInp" v-model.number="routingConfigurationsObj.priority"></el-input>
          <span>（1~9999）</span>
        </el-form-item>
        <el-form-item label="下一跳">
          <el-input class="adjustInp" v-model="routingConfigurationsObj.nextHop"></el-input>
        </el-form-item>
        <el-form-item label="网络接口">
          <el-select v-model="routingConfigurationsObj.outflowInterface">
            <el-option label="eth1" value="eth1"></el-option>
            <el-option label="eth2" value="eth2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权重">
          <el-input class="adjustInp" v-model.number="routingConfigurationsObj.weights"></el-input>
          <span>（1~255）</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogRoute = false" size="small">取 消</el-button>
      <el-button type="primary" @click="saveRoute(routingConfigurationsObj,routeIndex)" size="small">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
      width="600px"
      title="地址列表信息"
      :visible.sync="addressShow"
      append-to-body>
      <el-form label-width="120px" label-position="left">
        <el-form-item label="接口名称">
          <el-input v-model="addressLists.name" class="adjustInp"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-col :span="24">
            <el-input style="width: 200px;" v-model='addressLists.ipAddress1'></el-input>
            /
            <el-select placeholder="" v-model="addressLists.ipAddress2">
              <el-option label="255.255.255.0" value="255.255.255.0"></el-option>
              <el-option label="255.255.254.0" value="255.255.254.0"></el-option>
              <el-option label="255.255.0.0" value="255.255.0.0"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <p align="right">
        <el-button type="primary" plain size="mini" @click="addressShow = false">取消</el-button>
        <el-button type="primary" size="mini" @click="saveAddress(addressLists,addressIndex)">保 存</el-button>
      </p>
    </el-dialog>
    <!-- 新建路由弹窗 -->
    <el-dialog
      title="新建策略"
      :visible.sync="dialogStrategy"
      width="500px"
      append-to-body>
      <el-form label-width="120px" label-position="left">
        <el-form-item label="规则名">
          <el-input v-model="strategyObj.strategyName" class="adjustInp"
                    placeholder="请输入IP地址类型（IPv4）"></el-input>
        </el-form-item>
        <el-form-item label="序号">
          <el-input v-model.number="strategyObj.serialNumber" class="adjustInp"></el-input>
        </el-form-item>
        <el-form-item label="源地址">
          <el-select v-model="strategyObj.sourceAddress" style="max-width:179px" class="adjustInp">
            <el-option v-for="(n,i) in firewall.addressLists" :key="i" :label="n.name" :value="n.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目的地址">
          <el-select v-model="strategyObj.destinationAddress" style="max-width:179px" class="adjustInp">
            <el-option v-for="(n,i) in firewall.addressLists" :key="i" :label="n.name" :value="n.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源端口">
          <el-input v-model.number="strategyObj.sourcePort" class="adjustInp"></el-input>
        </el-form-item>
        <el-form-item label="服务">
          <el-select v-model="strategyObj.service" style="max-width:179px" class="adjustInp">
            <el-option label="any" value="any"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="访问控制">
          <el-radio-group v-model="strategyObj.accessControl">
            <el-radio :label="1">允许</el-radio>
            <el-radio :label="0">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogStrategy = false" size="small">取 消</el-button>
      <el-button type="primary" @click="saveStrategy(strategyObj,strategyIndex)" size="small">确 定</el-button>
    </span>
    </el-dialog>
    <p align="right">
      <el-button type="primary" plain size="mini" @click="innerNode = false">取消</el-button>
      <el-button type="primary" size="mini" @click="saveFire()">保 存</el-button>
    </p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      isNew: false,
        isStrategy:false,
      routeIndex: 0,
      addressIndex: 0,
        strategyIndex: 0,
      newAddress: false,
      innerNode: false,
      addressShow: false,
      dialogRoute: false,
        dialogStrategy:false,
      activeName: 'first',
      interfacesShow: false,
      tableData: [
        { interfaceName: 'eth1' },
        { interfaceName: 'eth2' }
      ],
      routingConfigurationsObj: {
          destinationAddress: "", //IP地址（IPv4）
          mask: "", //IP掩码类型
          nextHop: "", //IP地址（IPv4）  下一跳地址的子网需要和流出网口配置的子网相同
          outflowInterface: "",	//选项：配置为路由模式的物理接口
          priority: 1, //1-9999
          weights: 1 //1-255
      },
      addressLists: {
        name: '',
        ipAddress: '',
        ipAddress1: '', // (子网)IP地址类型(IPv4)/掩码例如：1.1.1.1/255.255.255.0 或(区间)IP地址类型(IPv4)-IP地址类型(IPv4)例如：1.1.1.1-1.1.1.100
        ipAddress2: ''
      },
      ipaddressAndMask01: '',
      ipaddressAndMask02: '',
      physicalInterfaces: {
          interfaceName: '',	// 系统默认生成，用户不可修改。如：eth0、eth1
          ipaddressAndMask: '',// IP地址/mask IP地址获取选择为"静态配置"时需要配置
          ipobtainMode: 1, // 0:通过DHCP获取;1:静态配置  工作模式选择为"路由模式"时需要进行配置
          operatingMode: 0, // 0:路由模式;1:透明模式
          enableFlag: 1, // 0:不启用、1:启用  可以不设此配置项，默认启用
          netWorkName: ''
      },
      createVM: {
        diskGbNeed: 20,
        dname: "模板3",
        hostId: "22",
        hostName: "1",
        memoryNeed: 2,
        reProduce: false,
        tmpId: 6,
        vcpusNeed: 2
      },
      strategyObj: {
        accessControl: 1,
        destinationAddress: '', // 目的地址列表
        intrusionPreventionStrategy: 0,
        logFlag: 0,
        serialNumber: 0, // 代表策略优先级
        service: '', // 服务类型
        sourceAddress: '', // 源地址列表
        sourcePort: '', // 源端口
        strategyName: '' // 策略名称
      },
      firewall: {
        physicalInterfaces: [],
        routingConfigurations: [],
        strategyList: [],
        addressLists: [],
        bridgeInterfaceConfiguration: null,
        firewallName: '',
        fwType: 0,
        interfaceTraffic: 0
      }
    }
  },
  props: ['netWorkName','allCreateVM','allData'],
  watch: {
    allData(val) {
      if(val) {
        this.activeName = 'first'
        console.log(val, 'ggg')
        if (val.firewall) {
          // if(val.firewall.addressLists.length) {
            let fire = val.firewall
            this.tableData = []
            this.tableData.push(...fire.physicalInterfaces)
            this.firewall.routingConfigurations = fire.routingConfigurations ? fire.routingConfigurations : []
            this.firewall.addressLists = fire.addressLists ? fire.addressLists : []
            // this.strategyObj = fire.strategyList[0]
            this.firewall.strategyList = fire.strategyList ? fire.strategyList : []
            this.createVM = val.createVM
          // }
        } else {
          this.firewall.physicalInterfaces = []
          this.firewall.routingConfigurations = []
          this.firewall.addressLists = []
          this.firewall.strategyList = []
          let arr = [
            { interfaceName: 'eth1' },
            { interfaceName: 'eth2' }
          ]
          this.tableData = []
          this.tableData.push(...arr)
          this.strategyObj = {
            accessControl: 1,
            destinationAddress: '', // 目的地址列表
            intrusionPreventionStrategy: 0,
            logFlag: 0,
            serialNumber: null, // 代表策略优先级
            service: '', // 服务类型
            sourceAddress: '', // 源地址列表
            sourcePort: '', // 源端口
            strategyName: '' // 策略名称
          }
          this.routingConfigurationsObj = {
              destinationAddress: "", //IP地址（IPv4）
              mask: "", //IP掩码类型
              nextHop: "", //IP地址（IPv4）  下一跳地址的子网需要和流出网口配置的子网相同
              outflowInterface: "",	//选项：配置为路由模式的物理接口
              priority: null, //1-9999
              weights: null //1-255
          }
          this.addressLists = {
            name: '',
            ipAddress: '',
            ipAddress1: '', // (子网)IP地址类型(IPv4)/掩码例如：1.1.1.1/255.255.255.0 或(区间)IP地址类型(IPv4)-IP地址类型(IPv4)例如：1.1.1.1-1.1.1.100
            ipAddress2: ''
          }
          this.ipaddressAndMask01 = ''
          this.ipaddressAndMask02 = ''
          let phy = {
              interfaceName: '',	// 系统默认生成，用户不可修改。如：eth0、eth1
              ipaddressAndMask: '',// IP地址/mask IP地址获取选择为"静态配置"时需要配置
              ipobtainMode: 1, // 0:通过DHCP获取;1:静态配置  工作模式选择为"路由模式"时需要进行配置
              operatingMode: 0, // 0:路由模式;1:透明模式
              enableFlag: 1, // 0:不启用、1:启用  可以不设此配置项，默认启用
              netWorkName: ''
          }
          this.physicalInterfaces = Object.assign({},phy)
          this.createVM = {
            diskGbNeed: 20,
            dname: "模板3",
            hostId: "22",
            hostName: "1",
            memoryNeed: 2,
            reProduce: false,
            tmpId: 6,
            vcpusNeed: 2
          }
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    showDialog(name) {
      this.firewall.firewallName = name
      // this.firewall.strategyList = []
      this.firewall.physicalInterfaces = []
      this.innerNode = true
    },
    saveFire() {
      // let newData = Object.assign({},this.strategyObj)
      // this.firewall.strategyList.push(newData)
        let newPhy = Object.assign([], this.tableData)
        console.log(newPhy, "========")
        this.firewall.physicalInterfaces = newPhy
        console.log(this.firewall.physicalInterfaces, "==2==2=====")
      let obj = { firewall: Object.assign({},this.firewall), createVM: Object.assign({},this.createVM)}
      this.$emit('fireData',obj)
      this.innerNode = false
    },
    interfaceEdit(data,id) { // 显示物理接口eth0或eth1数据配置表
      this.flag = id
      this.physicalInterfaces = Object.assign({},data)
      if(data.ipaddressAndMask) {
        let maskArr = data.ipaddressAndMask.split("/")
        this.ipaddressAndMask01 = maskArr[0]
        this.ipaddressAndMask02 = maskArr[1]
      }
      this.interfacesShow = true
    },
    savePort(i) {
      this.physicalInterfaces.ipaddressAndMask = `${ this.ipaddressAndMask01 }/${ this.ipaddressAndMask02 }`
      let newObj = Object.assign({},this.physicalInterfaces)
      this.$set(this.tableData,i,newObj)
      // this.$set(this.firewall.physicalInterfaces,i,newObj)
      this.ipaddressAndMask01 = ''
      this.ipaddressAndMask02 = ''
      this.interfacesShow = false
    },
    saveRoute(data,i) {
      let obj = Object.assign({},data)
      if(this.isNew) {
          this.$set(this.firewall.routingConfigurations,i,obj)
          this.isNew = false
      } else {
          this.firewall.routingConfigurations.push(obj)
      }
      this.dialogRoute = false
    },
      saveStrategy(data,i) {
          let obj = Object.assign({},data)
          if(this.isStrategy) {
              this.$set(this.firewall.strategyList,i,obj)
              this.isStrategy = false
          } else {
              this.firewall.strategyList.push(obj)
          }
          this.dialogStrategy = false
      },
      delStrategy(i){
          this.firewall.strategyList.splice(i,1)
      },
      editStrategy(data,i) {
        console.log(data, ">>>>>>>>")
          this.strategyObj = data
          this.strategyIndex = i
          this.isStrategy = true
          this.dialogStrategy = true
      },

      delRouter(i){
          this.firewall.routingConfigurations.splice(i,1)
      },
    editRouter(data,i) {
      this.routingConfigurationsObj = data
      this.routeIndex = i
      this.isNew = true
      this.dialogRoute = true
    },
    editorAddress(data,i) {
      this.addressIndex = i
      this.addressLists.name = data.name
      let addressArr = data.ipAddress.split("/")
      this.addressLists.ipAddress1 = addressArr[0]
      this.addressLists.ipAddress2 = addressArr[1]
      this.newAddress = true
      this.addressShow = true
    },
    saveAddress(data,i) {
      data.ipAddress = `${data.ipAddress1}/${data.ipAddress2}`
      let { name, ipAddress } = data
      if(this.newAddress) {
        this.$set(this.firewall.addressLists,i,{name,ipAddress})
        this.newAddress = false
      } else {
        this.firewall.addressLists.push({ name, ipAddress })
      }
      this.addressShow = false

    },
    getnetwork() {
      this.$http({
        url: this.$http.adornUrl('/vm/networkList'),
        method: 'post'
      }).then(({data}) => {
        if (data.list && data.list.length) {
          this.netWorkName = data.list
        }
      }).catch(error => {
        this.$message({
          showClose: false,
          message: '程序异常,请联系管理员',
          type: 'warning'
        })
      })
    },
    VMChange(str) {
      let obj = this.allCreateVM.filter(n => n.dname == str)[0]
      this.createVM = Object.assign({},obj)
    }
  }
}
</script>

<style scoped>
.topBar {
    display: block;
    margin: 0;
    padding: 0 14px;
    margin-bottom: 6px;
    color: #3E8EF7;
    height: 20px;
    font: 16px/20px '微软雅黑';
    text-align: right;
  }
  .adjustInp {
    width: 204px;
  }
</style>
